<template>
  <div class="product-section">
    <h2 class="section-title">我们的代言</h2>
    <div class="product-list">
      <el-card
          v-for="product in products"
          :key="product.id"
          shadow="hover"
          class="product-card"
      >
        <img :src="product.image" :alt="product.name" class="product-image" />
        <div class="product-info">
          <h3>{{ product.name }}</h3>
          <p>{{ product.description }}</p>
          <el-button type="primary" plain>了解更多</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
const products = [
  {
    id: 1,
    name: '沪上阿姨奶茶',
    description: '连接亿万用户的即时通讯平台',
    image: 'https://example.com/qq-icon.png'
  },
  {
    id: 2,
    name: 'Davena手表',
    description: '全方位的移动社交、支付和生活服务平台',
    image: 'https://example.com/wechat-icon.png'
  },
  {
    id: 3,
    name: 'Mac口红',
    description: '安全稳定的云计算服务',
    image: 'https://example.com/cloud-icon.png'
  },
  {
    id: 4,
    name: '觅橘防晒衣',
    description: '海量正版高清影视内容',
    image: 'https://example.com/video-icon.png'
  }
]
</script>

<style scoped>
.product-section {
  padding: 60px 0;
  background-color: #f9f9f9;
}

.section-title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 40px;
  color: #333;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.product-card {
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  height: 160px;
  object-fit: contain;
  padding: 20px;
}

.product-info {
  padding: 20px;
  text-align: center;
}

.product-info h3 {
  margin-bottom: 10px;
  font-size: 18px;
}

.product-info p {
  color: #666;
  margin-bottom: 15px;
  font-size: 14px;
}
</style>
